<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LearnHub - 智能学习云平台</title>
    <style>
        :root {
            --primary-color: #4285f4;
            --secondary-color: #34a853;
            --accent-color: #ea4335;
            --light-color: #f8f9fa;
            --dark-color: #202124;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--light-color);
            color: var(--dark-color);
        }
        header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }
        .nav-links {
            display: flex;
            gap: 1.5rem;
        }
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
        }
        .hero {
            text-align: center;
            padding: 3rem 1rem;
            background: url('https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center;
            background-size: cover;
            color: white;
            position: relative;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
        }
        .hero-content {
            position: relative;
            z-index: 1;
        }
        .search-bar {
            margin: 2rem auto;
            max-width: 600px;
            display: flex;
        }
        .search-bar input {
            flex: 1;
            padding: 0.8rem;
            border: none;
            border-radius: 4px 0 0 4px;
            font-size: 1rem;
        }
        .search-bar button {
            padding: 0.8rem 1.5rem;
            background-color: var(--accent-color);
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            padding: 2rem;
        }
        .feature-card {
            background: white;
            border-radius: 8px;
            padding: 1.5rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        .feature-card:hover {
            transform: translateY(-5px);
        }
        .feature-card h3 {
            color: var(--primary-color);
        }
        footer {
            background-color: var(--dark-color);
            color: white;
            text-align: center;
            padding: 1.5rem;
            margin-top: 2rem;
        }
        .carousel {
            width: 100%;
            overflow: hidden;
            position: relative;
            height: 300px;
            margin: 2rem 0;
        }
        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease;
        }
        .carousel-item {
            min-width: 100%;
            height: 300px;
            background-size: cover;
            background-position: center;
        }
        .carousel-controls {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
        }
        .carousel-control {
            background: rgba(0,0,0,0.5);
            color: white;
            border: none;
            padding: 1rem;
            cursor: pointer;
        }
        .carousel-indicators {
            display: flex;
            justify-content: center;
            padding: 1rem 0;
        }
        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ccc;
            margin: 0 5px;
            cursor: pointer;
        }
        .indicator.active {
            background: var(--primary-color);
        }
        .tab-container {
            margin: 2rem;
        }
        .tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
        }
        .tab {
            padding: 1rem 2rem;
            cursor: pointer;
            border-bottom: 3px solid transparent;
        }
        .tab.active {
            border-bottom-color: var(--primary-color);
            color: var(--primary-color);
        }
        .tab-content {
            display: none;
            padding: 1.5rem;
            background: white;
            border-radius: 0 0 8px 8px;
        }
        .tab-content.active {
            display: block;
        }
        .accordion {
            margin: 2rem 0;
        }
        .accordion-item {
            border: 1px solid #ddd;
            margin-bottom: 0.5rem;
            border-radius: 4px;
            overflow: hidden;
        }
        .accordion-header {
            padding: 1rem;
            background: #f5f5f5;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .accordion-content {
            padding: 1rem;
            display: none;
        }
        .accordion-item.active .accordion-content {
            display: block;
        }
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-btn {
            padding: 0.8rem 1.5rem;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background: white;
            min-width: 160px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            z-index: 1;
            border-radius: 4px;
        }
        .dropdown-content a {
            color: var(--dark-color);
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        .dropdown-content a:hover {
            background: #f1f1f1;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 100;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
        }
        .modal-content {
            background: white;
            margin: 10% auto;
            padding: 2rem;
            width: 80%;
            max-width: 600px;
            border-radius: 8px;
            position: relative;
        }
        .close-modal {
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 1.5rem;
            cursor: pointer;
        }
        .progress-container {
            width: 100%;
            background: #e0e0e0;
            border-radius: 4px;
            margin: 1rem 0;
        }
        .progress-bar {
            height: 20px;
            background: var(--secondary-color);
            border-radius: 4px;
            width: 0%;
            transition: width 0.3s;
        }
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
        }
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 200px;
            background: var(--dark-color);
            color: white;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
        }
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <div class="logo">LearnHub</div>
            <div class="nav-links">
                <a href="index.html">首页</a>
                <a href="courses.html">课程中心</a>
                <a href="news.html">学习资讯</a>
                <a href="community.html">学习社区</a>
                <div class="dropdown">
                    <button class="dropdown-btn">更多</button>
                    <div class="dropdown-content">
                        <a href="#">个人中心</a>
                        <a href="#">学习记录</a>
                        <a href="#">设置</a>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <section class="hero">
        <div class="hero-content">
            <h1>智能学习云平台</h1>
            <p>个性化学习体验，助您掌握知识与技能</p>
            <div class="search-bar">
                <input type="text" placeholder="搜索课程、资讯或用户...">
                <button>搜索</button>
            </div>
        </div>
    </section>

    <div class="carousel">
        <div class="carousel-inner">
            <div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div>
            <div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div>
            <div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div>
        </div>
        <div class="carousel-controls">
            <button class="carousel-control prev">❮</button>
            <button class="carousel-control next">❯</button>
        </div>
        <div class="carousel-indicators">
            <div class="indicator active"></div>
            <div class="indicator"></div>
            <div class="indicator"></div>
        </div>
    </div>

    <div class="tab-container">
        <div class="tabs">
            <div class="tab active" data-tab="featured">精选课程</div>
            <div class="tab" data-tab="popular">热门课程</div>
            <div class="tab" data-tab="new">最新课程</div>
        </div>
        <div class="tab-content active" id="featured">
            <h3>精选课程推荐</h3>
            <p>我们为您精心挑选了最适合的课程，助您快速提升技能。</p>
            <div class="features">
                <div class="feature-card">
                    <h3>Python编程入门</h3>
                    <p>从零开始学习Python编程语言，掌握基础语法和常用库。</p>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 75%;"></div>
                    </div>
                    <button class="tooltip">查看详情
                        <span class="tooltiptext">点击查看课程详细信息</span>
                    </button>
                </div>
                <div class="feature-card">
                    <h3>数据科学基础</h3>
                    <p>学习数据分析和可视化的基本技能，使用Python和R语言。</p>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 60%;"></div>
                    </div>
                    <button class="tooltip">查看详情
                        <span class="tooltiptext">点击查看课程详细信息</span>
                    </button>
                </div>
                <div class="feature-card">
                    <h3>人工智能导论</h3>
                    <p>了解人工智能的基本概念和应用场景，探索未来科技趋势。</p>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 45%;"></div>
                    </div>
                    <button class="tooltip">查看详情
                        <span class="tooltiptext">点击查看课程详细信息</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="tab-content" id="popular">
            <h3>热门课程</h3>
            <p>当前最受学员欢迎的课程，与万千学习者一起进步。</p>
            <div class="features">
                <div class="feature-card">
                    <h3>Web前端开发</h3>
                    <p>掌握HTML, CSS和JavaScript，构建现代化的响应式网站。</p>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 85%;"></div>
                    </div>
                    <button class="tooltip">查看详情
                        <span class="tooltiptext">点击查看课程详细信息</span>
                    </button>
                </div>
                <div class="feature-card">
                    <h3>移动应用开发</h3>
                    <p>学习使用Flutter或React Native开发跨平台移动应用。</p>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 70%;"></div>
                    </div>
                    <button class="tooltip">查看详情
                        <span class="tooltiptext">点击查看课程详细信息</span>
                    </button>
                </div>
                <div class="feature-card">
                    <h3>云计算基础</h3>
                    <p>了解AWS, Azure和Google Cloud等云服务平台的基本概念。</p>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 55%;"></div>
                    </div>
                    <button class="tooltip">查看详情
                        <span class="tooltiptext">点击查看课程详细信息</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="tab-content" id="new">
            <h3>最新课程</h3>
            <p>平台最新上线的课程，抢先体验前沿知识。</p>
            <div class="features">
                <div class="feature-card">
                    <h3>区块链技术入门</h3>
                    <p>探索区块链技术原理和应用，了解加密货币背后的技术。</p>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 30%;"></div>
                    </div>
                    <button class="tooltip">查看详情
                        <span class="tooltiptext">点击查看课程详细信息</span>
                    </button>
                </div>
                <div class="feature-card">
                    <h3>量子计算基础</h3>
                    <p>了解量子计算的基本概念和未来发展方向。</p>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 25%;"></div>
                    </div>
                    <button class="tooltip">查看详情
                        <span class="tooltiptext">点击查看课程详细信息</span>
                    </button>
                </div>
                <div class="feature-card">
                    <h3>元宇宙与虚拟现实</h3>
                    <p>探索元宇宙概念和虚拟现实技术的应用场景。</p>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 20%;"></div>
                    </div>
                    <button class="tooltip">查看详情
                        <span class="tooltiptext">点击查看课程详细信息</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="accordion">
        <h2 style="text-align: center; margin-bottom: 1rem;">常见问题</h2>
        <div class="accordion-item">
            <div class="accordion-header">
                <span>如何开始学习？</span>
                <span>+</span>
            </div>
            <div class="accordion-content">
                <p>注册账号后，您可以在课程中心选择感兴趣的课程开始学习。我们提供从入门到高级的多种课程，适合不同水平的学习者。</p>
            </div>
        </div>
        <div class="accordion-item">
            <div class="accordion-header">
                <span>课程是免费的吗？</span>
                <span>+</span>
            </div>
            <div class="accordion-content">
                <p>我们提供部分免费课程和付费课程。免费课程可以让您学习基础知识，付费课程则提供更深入的内容和实践项目。</p>
            </div>
        </div>
        <div class="accordion-item">
            <div class="accordion-header">
                <span>如何获得学习证书？</span>
                <span>+</span>
            </div>
            <div class="accordion-content">
                <p>完成课程的所有学习内容和考核后，您将获得相应的学习证书。证书可以在个人中心查看和下载。</p>
            </div>
        </div>
    </div>

    <button id="open-modal" style="display: block; margin: 2rem auto; padding: 1rem 2rem; background: var(--accent-color); color: white; border: none; border-radius: 4px; cursor: pointer;">订阅最新资讯</button>

    <div class="modal" id="subscribe-modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h2>订阅最新学习资讯</h2>
            <p>填写您的邮箱，我们将定期发送最新的课程、活动和学习资源给您。</p>
            <form style="margin-top: 1.5rem;">
                <div style="margin-bottom: 1rem;">
                    <label for="email">电子邮箱:</label>
                    <input type="email" id="email" style="width: 100%; padding: 0.8rem; margin-top: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                </div>
                <div style="margin-bottom: 1rem;">
                    <label for="frequency">订阅频率:</label>
                    <select id="frequency" style="width: 100%; padding: 0.8rem; margin-top: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                        <option value="weekly">每周</option>
                        <option value="biweekly">每两周</option>
                        <option value="monthly">每月</option>
                    </select>
                </div>
                <button type="submit" style="width: 100%; padding: 0.8rem; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer;">确认订阅</button>
            </form>
        </div>
    </div>

    <footer>
        <p>© 2025 LearnHub 智能学习云平台. 保留所有权利.</p>
        <div style="margin-top: 1rem;">
            <a href="#" style="color: white; margin: 0 0.5rem;">关于我们</a>
            <a href="#" style="color: white; margin: 0 0.5rem;">联系我们</a>
            <a href="#" style="color: white; margin: 0 0.5rem;">隐私政策</a>
            <a href="#" style="color: white; margin: 0 0.5rem;">使用条款</a>
        </div>
    </footer>

    <script>
        // 轮播图功能
        let currentSlide = 0;
        const slides = document.querySelectorAll('.carousel-item');
        const indicators = document.querySelectorAll('.indicator');
        const totalSlides = slides.length;

        function showSlide(index) {
            slides.forEach((slide, i) => {
                slide.style.display = i === index ? 'block' : 'none';
            });
            indicators.forEach((indicator, i) => {
                indicator.classList.toggle('active', i === index);
            });
            document.querySelector('.carousel-inner').style.transform = `translateX(-${index * 100}%)`;
            currentSlide = index;
        }

        document.querySelector('.prev').addEventListener('click', () => {
            currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
            showSlide(currentSlide);
        });

        document.querySelector('.next').addEventListener('click', () => {
            currentSlide = (currentSlide + 1) % totalSlides;
            showSlide(currentSlide);
        });

        indicators.forEach((indicator, i) => {
            indicator.addEventListener('click', () => {
                showSlide(i);
            });
        });

        // 自动轮播
        setInterval(() => {
            currentSlide = (currentSlide + 1) % totalSlides;
            showSlide(currentSlide);
        }, 5000);

        // 标签页功能
        const tabs = document.querySelectorAll('.tab');
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const tabId = tab.getAttribute('data-tab');
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
                tab.classList.add('active');
                document.getElementById(tabId).classList.add('active');
            });
        });

        // 手风琴功能
        const accordionItems = document.querySelectorAll('.accordion-item');
        accordionItems.forEach(item => {
            const header = item.querySelector('.accordion-header');
            header.addEventListener('click', () => {
                item.classList.toggle('active');
                const icon = header.querySelector('span:last-child');
                icon.textContent = item.classList.contains('active') ? '-' : '+';
            });
        });

        // 模态框功能
        const modal = document.getElementById('subscribe-modal');
        const openBtn = document.getElementById('open-modal');
        const closeBtn = document.querySelector('.close-modal');

        openBtn.addEventListener('click', () => {
            modal.style.display = 'block';
        });

        closeBtn.addEventListener('click', () => {
            modal.style.display = 'none';
        });

        window.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.style.display = 'none';
            }
        });
    </script>
</body>
</html>